<template>
  <Modal v-model="isShow"
         footer-hide
         width="700"
         @on-cancel="closeEvent"
         :mask-closable="false"
         title="权限设置">
    <Form ref="form" class="form" :label-width="80" :model="formData" :rules="rules">
      <FormItem label="角色名称" prop="roleName">
        <Input readonly v-model="roleName"/>
      </FormItem>
      <FormItem label="角色编码" prop="roleCode">
        <Input readonly v-model="formData.roleCode"/>
      </FormItem>
      <Transfer
          class="permission"
          :data="allPermissionList"
          :list-style="listStyle"
          :titles="['角色未拥有的权限','角色拥有的权限']"
          :target-keys="formData.permissionCodes"
          filterable
          @on-change="handleChange"/>
      <FormItem class="form-bottom-btn">
        <Button @click="submitBtnClick" type="primary">保存</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>

import {getAllPermission} from "@/api/sys/permission";
import {getAllRolePermission, saveOrUpdateRolePermission} from "@/api/sys/role";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import {Message} from "view-ui-plus";
import {getDictDataName} from "@/util";

const formData = {
  roleCode: undefined,
}

export default {
  name: "SysRolePermissionEdit",
  data() {
    return {
      isShow: false,
      allPermissionList: [],
      roleName: '',
      formData: {
        roleCode: undefined,
        permissionCodes: []
      },
      rules: {},
      listStyle: {
        width: '300px',
        height: '300px'
      }
    }
  },
  methods: {
    submitBtnClick() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        let saveData = this.$utils.clone(this.formData)
        saveOrUpdateRolePermission(saveData).then(res => {
          if (res.code == RESPONSE_CODE_SUCCESS) {
            this.$emit("ok")
            Message.success("保存成功")
            this.isShow = false
          }
        })
      })
    },
    show({roleCode, roleName}) {
      this.formData = this.$utils.clone(formData)
      this.formData.roleCode = roleCode
      this.roleName = roleName
      Promise.all([getAllPermission(), getAllRolePermission({roleCode})]).then(async res => {
        // 设置所有权限列表
        let newAllPermissionList = [];
        let allPermissionList = res[0].data
        for (let item of allPermissionList) {
          newAllPermissionList.push({
            key: item.code,
            label: item.name + "-" + item.code + "-" + (await getDictDataName('YesNo:EnableDisable', item.permissionStatus))
          })
        }
        this.allPermissionList = newAllPermissionList;

        // 设置角色拥有的权限列表
        let rolePermission = res[1].data
        let newRolePermissionCodes = [];
        for (let item of rolePermission) {
          newRolePermissionCodes.push(item.permissionCode)
        }
        this.formData.permissionCodes = newRolePermissionCodes;

        this.isShow = true
      })
    },
    handleChange(newTargetKeys) {
      this.formData.permissionCodes = newTargetKeys;
    },
    closeEvent() {
      this.formData = this.$utils.clone(formData)
    },
  }
}
</script>

<style lang="less" scoped>
.form {
  .permission {
    :deep(.ivu-transfer-list-footer) {
      height: 0;
      border: 0 solid #dcdee2;
    }
  }
}
</style>
